<template>
	<view class="index">
		<u--form :model="form" :rules="rules" ref="uForm">
			<u-form-item prop="name">
				<u--input v-model="form.name" placeholder="如何称呼您" type="text" />
			</u-form-item>
			<u-form-item prop="phoneNumber">
				<u--input v-model="form.phoneNumber" placeholder="请输入手机号" />
			</u-form-item>
			<u-form-item prop="smsCode">
				<view class="sms_box">
					<u--input customStyle="margin-top:0" v-model="form.smsCode" placeholder="请输入验证码" />
					<view class="sms_btn" @click="sendCode()">{{countdown?countdown+'秒':'发送验证码'}}</view>
				</view>
			</u-form-item>
			<u-form-item prop="password">
				<u--input type="password" v-model="form.password" placeholder="请输入密码" />
			</u-form-item>
			<u-form-item prop="rePassword">
				<u--input type="password" v-model="rePassword" placeholder="重新输入密码" />
			</u-form-item>
			<u-form-item prop="recommendCode">
				<u--input :disabled="scan" v-model="form.recommendCode" placeholder="请输入邀请人的推荐码(选填)" />
			</u-form-item>
		</u--form>
		<view class="text">
			<view class="check_box" :style="{background:check?'#3392FF':''}" @click="check=!check">
				<u-icon v-if="check" name="checkmark" size="10" color="white" />
			</view>
			<view>
				我已阅读
				<text class="blue_text" @click="gotoProtocol('customer')">
					《用户协议》
				</text>
				和
				<text class="blue_text" @click="gotoProtocol('secret')">
					《隐私协议》
				</text>
			</view>
		</view>
		<u-button class="btn" type="primary" @click="submit">立即注册</u-button>
	</view>
</template>

<script>
	import Pinyin from 'js-pinyin';
	import {
		md5
	} from '@/utils/tools.js';
	export default {
		data() {
			return {
				form: {
					name: null,
					phoneNumber: null,
					password: null,
					smsCode: null,
					recommendCode: null
				},
				rePassword: null,
				tab: 1,
				pageHeight: 0,
				code: '',
				codeSend: false,
				countdown: 0,
				timer: null,
				check: false,
				imei: null,
				scan: false,
				rules: {
					phoneNumber: [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {

								return uni.$u.test.mobile(value);
							},
							message: '请输入正确的手机号',
							trigger: ['change', 'blur'],
						}
					],
					password: [{
						required: true,
						message: '请填写密码',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							let reg = /^[0-9a-zA-Z]{6,20}$/
							return reg.test(value)

						},
						message: '请输入6-20位由字母或数字组成的密码',
						trigger: ['blur', 'change']
					}],
					smsCode: {
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},

				},
			}
		},
		onLoad(e) {
			// console.log(uni.getSystemInfoSync().windowHeight)
			if (e.recommendCode) {
				this.form.recommendCode = e.recommendCode;
				this.scan = true
			}
			// plus.device.getInfo({
			// 	success: (e) => {
			// 		let imei = e.imei.split(',')[0]
			// 		this.imei = imei
			// 		// console.log(e.imei.split(','))
			// 	},
			// 	fail: (e) => {
			// 		console.log(e)
			// 	}
			// });
			this.pageHeight = uni.getSystemInfoSync().windowHeight;
		},
		onReady() {
			console.log(this.$refs.uForm)
		},
		methods: {
			async sendCode() {
				if (this.countdown > 0) {
					uni.showToast({
						title: '请等待倒计时结束后再发送验证码',
						icon: 'none'
					})
					return
				}
				if (!this.form.phoneNumber) {
					uni.showToast({
						title: '请先输入手机号',
						icon: 'none'
					})
					return
				}
				this.countdown = 60;

				this.timer = setInterval(() => {
					this.countdown--
				}, 1000)
				let res = await this.$api.login.sendSMS({
					phoneNumber: this.form.phoneNumber
				})
				if (res.code === 0) {
					uni.showToast({
						title: '验证码发送成功,请注意查收',
						icon: 'none'
					})
				}

			},
			gotoProtocol(type) {
				uni.navigateTo({
					url: "/views/login/protocol?type=" + type,
				});
			},
			async submit() {
				this.$refs.uForm.validate().then(async res => {
					if (!this.check) {
						uni.showToast({
							title: '请先阅读用户协议及隐私协议',
							icon: 'none'
						})
						return
					}
					if (this.form.password !== this.rePassword) {
						uni.showToast({
							icon: 'none',
							title: '请确认两次输入的密码一致'
						})
						return
					}
					let data = await this.$api.login.register({
						...this.form,
						systemType: '13.1',
						// imeiCode: md5(this.imei),
						mobileType: ''
					})
					console.log(data)
					if (data.code === 0) {
						uni.showToast({
							title: '注册成功',
							icon: 'none'
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						})
					}
				})
			}
		},
		watch: {
			countdown(e) {
				// console.log(e)
				if (e == 0) {
					clearInterval(this.timer)
				}
			}

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		height: 100%;
		padding: 30rpx;
		background-color: white;
		box-sizing: border-box;
		// display: flex;
		// flex-direction: column;
	}

	::v-deep .u-form-item__body__right__message {
		margin-left: 0 !important;
	}

	.sms_box {
		width: 100%;
		display: flex;
		// gap: 24rpx;
		align-items: center;
		// margin-top: 20rpx;
		border-radius: 8rpx;

		.sms_btn {
			width: 220rpx;
			height: 90rpx;
			background-color: #FAFAFA;
			text-align: center;
			line-height: 90rpx;
			font-size: 29rpx;
			color: #A0A1A3;
			border-radius: 8rpx;
			margin-left: 24rpx;
		}
	}

	.btn {
		margin-top: 20rpx;
	}

	.text {
		font-size: 24rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;

		.check_box {
			width: 24rpx;
			height: 24rpx;
			border-radius: 4rpx;
			border: 1rpx solid rgba(0, 0, 0, 0.3);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.blue_text {
			color: #3392FF;

		}
	}


	::v-deep .u-input {
		height: 90rpx !important;
		box-sizing: border-box;
		background-color: #FAFAFA;
		border: none;
		// flex: 0 !important;
		// margin-top: 20rpx;
	}
</style>